<template>
  <!-- 添加人员Dialog -->
  <el-dialog
    custom-class="add-dialog"
    :visible.sync="dialogVisible"
    width="1100px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    title="添加人员"
    destroy-on-close
    center
    @close="closeDialog"
  >
    <el-row type="flex" class="add-dialog-box mb20">
      <div class="search-box">
        <!-- <el-input
          size="small"
          v-model="searchInput"
          placeholder="搜索部门"
          prefix-icon="el-icon-search"
          class="mb10"
        /> -->
        <el-tree
          node-key="id"
          accordion
          :props="defaultProps"
          :load="loadNode"
          @node-click="nodeClick"
          :expand-on-click-node="false"
          lazy
        >
          <div class="custom-tree-node" slot-scope="{ node, data }">
            <div v-if="node.label == '新华源'">
              <img
                :src="require('@/assets/img/dispatch/' + node.label + '.png')"
                width="88"
                height="18"
              />
            </div>
            <div v-else-if="node.label == '恒源'">
              <img
                :src="require('@/assets/img/dispatch/' + node.label + '.png')"
                width="62"
              />
            </div>
            <div v-else>
              <svg-icon :icon-class="'label' + node.level" />
              {{ node.label }}
            </div>
          </div>
        </el-tree>
      </div>
      <div class="search-content">
        <el-row type="flex" justify="space-between">
          <el-input
            style="width: 290px"
            size="small"
            prefix-icon="el-icon-search"
            v-model="searchName"
            placeholder="请输入姓名或工号"
          ></el-input>
          <el-select
            v-if="query.gongxu == '1'"
            size="small"
            v-model="qfGx"
            placeholder="请选择添加前纺工序"
          >
            <el-option
              v-for="(item, index) in qfOption"
              :key="index"
              :label="item['key_value']"
              :value="item['key_value']"
            />
          </el-select>
        </el-row>
        <div style="margin: 12px 0 8px">已选人员：{{ tags.length }}人</div>
        <div style="margin-bottom: 7px">
          <el-tag
            v-for="(tag, index) in tags"
            :key="tag.name"
            style="margin: 0 8px 8px 0"
            size="small"
            closable
            @close="tagClose(tag, index)"
          >
            {{ tag.name }}
          </el-tag>
        </div>
        <div class="common-table">
          <el-table
            row-key="gh"
            ref="table"
            :data="tableData"
            style="width: 100%"
            max-height="374px"
            @select="selectRow"
            @select-all="selectAll"
          >
            <el-table-column type="selection" width="50"> </el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
              min-width="10%"
              align="center"
            />
            <el-table-column
              prop="sex"
              label="性别"
              min-width="10%"
              align="center"
            />
            <el-table-column
              prop="gh"
              label="工号"
              min-width="14%"
              align="center"
            />
            <el-table-column
              prop="cj"
              label="车间"
              min-width="10%"
              align="center"
            />
            <el-table-column
              prop="gongxu"
              label="工序"
              min-width="10%"
              align="center"
            />
            <el-table-column
              prop="workType"
              label="工种"
              min-width="10%"
              align="center"
            />
            <el-table-column
              prop="bc"
              label="班次"
              min-width="10%"
              align="center"
            >
              <template slot-scope="{ row }">
                <el-tag v-if="row.bc == '甲班'" size="mini" class="table-tag"
                  >甲班</el-tag
                >
                <span v-else-if="!row.bc"></span>
                <el-tag
                  v-else
                  size="mini"
                  class="table-tag"
                  color="#E9D1FF"
                  style="color: #7100d5"
                  >{{ row.bc }}</el-tag
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="common-pagination">
          <el-pagination
            background
            layout="prev, pager, next, sizes, jumper"
            :page-size="search.size"
            :pager-count="5"
            :current-page.sync="search.current"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </div>
    </el-row>
    <el-row type="flex" justify="end" align="middle">
      <el-button size="small" @click="dialogVisible = false">取消</el-button>
      <el-button size="small" type="primary" @click="addPerson">确定</el-button>
    </el-row>
  </el-dialog>
</template>

<script>
import { getPersonList, getPersonnelGroup } from '@/api/person.js';
import { addPerson } from '@/api/dispatch.js';
export default {
  props: {
    // 搜索条件
    query: {
      type: Object,
      default: function() {
        return {};
      }
    },
    date: {
      type: String
    }
  },
  data() {
    return {
      dialogVisible: false,
      searchInput: '',
      searchName: '',
      // 树
      defaultProps: {
        children: 'data',
        label: 'key_value'
      },
      tags: [],
      tableData: [],
      search: {
        size: 10,
        current: 1,
        name: '',
        gh: '',
        cj: '',
        group: '',
        org: '',
        gongxu: '',
        workType: '',
        bc: ''
      },
      total: 0,
      qfGx: '',
      range: [{ min: undefined, max: undefined }]
    };
  },
  computed: {
    qfOption() {
      return this.$store.getters.qfOption;
    }
  },
  watch: {
    searchName: function(val) {
      this.search.name = '';
      this.search.gh = '';
      if (/.*[\u4e00-\u9fa5]+.*$/.test(val)) {
        this.search.name = val;
      } else {
        this.search.gh = val;
      }
      this.$nextTick(() => {
        this.search.current = 1;
        this.getTableData();
      });
    }
  },
  created() {
    this.$store.dispatch('common/getDict', {
      dict: 'working_procedure_qf',
      name: 'qf'
    });
  },
  methods: {
    show() {
      this.tags = [];
      this.qfGx = '';
      this.search = {
        size: 10,
        current: 1,
        name: '',
        gh: '',
        cj: '',
        group: '',
        org: '',
        gongxu: '',
        workType: '',
        bc: ''
      };
      this.searchName = '';
      this.dialogVisible = true;
      this.getTableData();
    },
    async getTableData() {
      const res = await getPersonList(this.search);
      if (res.code == 1) {
        let { data } = res;
        this.tableData = data.records;
        this.total = data.total;
        this.tableLoading = false;

        this.tags.map(row => {
          let choseRow = this.tableData.find(item => row.gh == item.gh);
          if (choseRow) {
            this.$nextTick(() => {
              this.$refs.table.toggleRowSelection(choseRow, true);
            });
          }
        });
      }
    },
    async loadNode(node, resolve) {
      let form = node.level === 0 ? 'groupTreeTop' : node.data.key_name;
      const res = await getPersonnelGroup({ keyName: form });
      if (res.code === 1) {
        if (node.level == 5 && res.data.length == 0) {
          if (node.parent.data.key_value == '细纱') {
            return resolve([
              { key_name: '甲班', key_value: '甲班', key_query: 'bc' },
              { key_name: '乙班', key_value: '乙班', key_query: 'bc' }
            ]);
          } else {
            return resolve([
              { key_name: '甲班', key_value: '甲班', key_query: 'bc' },
              { key_name: '乙班', key_value: '乙班', key_query: 'bc' },
              { key_name: '丙班', key_value: '丙班', key_query: 'bc' }
            ]);
          }
        } else {
          return resolve(res.data);
        }
      }
    },
    async addPerson() {
      console.log(this.tags);
      this.dialogVisible = false
      this.$emit('ok',this.tags)
     
    },
    tagClose(tag, index) {
      this.tags.splice(index, 1);
      let choseRow = this.tableData.find(item => tag.gh == item.gh);
      if (choseRow) {
        this.$nextTick(() => {
          this.$refs.table.toggleRowSelection(choseRow, false);
        });
      }
    },
    // 树节点切换
    nodeClick(data, node) {
      this.search = {
        size: 10,
        current: 1,
        name: '',
        gh: '',
        cj: '',
        group: '',
        org: '',
        gongxu: '',
        workType: '',
        bc: ''
      };
      this.searchName = '';
      this.search[node.data.key_query] = node.data.key_value;
      if (node.level !== 1) {
        this.mapParent(node.parent);
      }
      this.search.current = 1;
      this.getTableData();
    },
    mapParent(node) {
      if (node && node.level > 0) {
        let { data } = node;
        this.search[data.key_query] = data.key_value;
        this.mapParent(node.parent);
      }
    },
    //表格行选择
    selectRow(selection, row) {
      // 添加
      if (JSON.stringify(selection).indexOf(row.gh) > -1) {
        this.tags.push(row);
      } else {
        // 删除
        let index = this.tags.find((item, index) => {
          if (item.gh == row.gh) {
            return index;
          }
        });
        this.tags.splice(index, 1);
      }
    },
    selectAll(selection) {
      if (selection.length) {
        let list = selection.filter(item => {
          return JSON.stringify(this.tags).indexOf(item.gh) === -1;
        });
        this.tags = this.tags.concat(list);
      } else {
        this.tags = this.tags.filter(item => {
          return JSON.stringify(this.tableData).indexOf(item.gh) === -1;
        });
      }
    },
    addRange() {
      this.range.push({ min: undefined, max: undefined });
    },
    closeDialog() {
      this.range = [{ min: undefined, max: undefined }];
    },
    clearInput(index) {
      this.range.splice(index, 1);
    },
    handleSizeChange(val) {
      this.search.current = 1;
      this.search.size = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.search.current = val;
      this.getTableData();
    }
  }
};
</script>

<style lang="scss">
.add-dialog {
  &-box {
    height: 540px;
    box-sizing: border-box;
    .search-box {
      width: 290px;
      box-sizing: border-box;
      padding: 15px 0;
      height: 100%;
      border: 1px solid #dee0e3;
      margin-right: 20px;
      overflow-y: auto;
      .el-tree {
        .el-tree-node__content {
          height: 42px;
          font-size: 15px;
          color: #48556a;
          border-bottom: 1px solid #f0f2f6;
          .svg-icon {
            font-size: 18px;
            margin-right: 8px;
          }
        }
        .el-tree-node.is-current > .el-tree-node__content > .custom-tree-node {
          color: #2c67f6;
        }
      }
    }
    .search-content {
      flex: 1;
      overflow: auto;
      .common-table {
        height: unset;
      }
    }
  }
}
</style>
